<!DOCTYPE html>
<html>
	<head>
		<title>2.1.1-div包左中右布局</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			html, body {
				height: 100%;
				width: 100%;
			}

			body {
                margin: 0;
				--overflow: auto;
				background-color: white;
			}

			.div_row1{
				border: solid 3px red;
				height:64px;
				width:100%;
				position: static;
			}
			.div_row1_p1{
				border: solid 2px green;
				height:32px;
				width:80%;
                --float:left;
				position: static;
			}
			.div_row1_p1-left{
				border: solid thin blue;
				height:100%;
				width:30%;
                float:left;
				position: static;
			}
            
			.div_row2{
				border: solid 3px red;
				height:64px;
				width:100%;
				position: static;
			}
			.div_row2_p1{
				border: solid 2px green;
				height:32px;
				width:80%;
				position: relative;
                --text-align: center无用;
			}
            .div_row2_p1_mg{
				border: solid thin blue;
				height:100%;
				width:5%;
                float:left;
				position: relative;
                visibility: hidden; /* 隐藏并占位*/
            }
			.div_row2_p1-center{
				border: solid thin blue;
				height:100%;
				width:30%;
                --display:none;
                float:left;
				position: relative;
                --flex:1;
			}
			
			.div_row3{
				border: solid 3px red;
				height:64px;
				width:100%;
				position: static;
			}
			.div_row3_p1{
				border: solid 2px green;
				height:32px;
				width:80%;
                float:left;
				position: relative;
 			}
			.div_row3_p1-right{
				border: solid thin blue;
				height:100%;
				width:30%;
                float:right;
				position: relative;
			}

		</style>
    </head>
    
	<body>
    2.1.1-div包左中右布局<br>
    <h3>采用float属性（作用于设置该属性的本元素）</h3>
        <div id="div_row1" class="div_row1">
					1.子div元素左对齐，绿色框为父DIV，蓝色框为子DIV(采用float:left浮动属性):<br>
			 <div id="div_row1_p1" class="div_row1_p1">
				 <div id="div_row1_p1_s1" class="div_row1_p1-left">
                     子div一(内文置左[text-align: left])
				 </div>
				 <div id="div_row1_p1_s2" class="div_row1_p1-left" style="text-align: center;">
                     子div二(内文置中[text-align: center])
				 </div>
				 <div id="div_row1_p1_s3" class="div_row1_p1-left" style="text-align: right;">
                     子div三(内文置右[text-align: right])
				 </div>
			 </div>
        </div>
        <br>
        <div id="div_row2" class="div_row2">
					2.子div元素置中，绿色框为父DIV，蓝色框为子DIV(采用float:left浮动属性，左边加个隐藏的占位格):<br>
			 <div id="div_row2_p1" class="div_row2_p1">
                 <div id="div_row2_p1_mg" class="div_row2_p1_mg">
                     占位格
                 </div>    
				 <div id="div_row2_p1_s1" class="div_row2_p1-center" style="text-align: left;">
                     子div一(内文置左[text-align: left])
				 </div>
				 <div id="div_row2_p1_s2" class="div_row2_p1-center" style="text-align: center;">
                     子div二(内文置中[text-align: center])
				 </div>
				 <div id="div_row2_p1_s3" class="div_row2_p1-center" style="text-align: right;">
                     子div三(内文置右[text-align: right])
				 </div>
                 
			 </div>
        </div>
        <br>
        <div id="div_row3" class="div_row3">
					3.子div元素置右，绿色框为父DIV，蓝色框为子DIV(采用float:right浮动属性,但排列顺序变成从右到左):<br>
			 <div id="div_row3_p1" class="div_row3_p1">
				 <div id="div_row3_p1_s1" class="div_row3_p1-right" style="text-align: left;">
                     子div一(内文置左[text-align: left])
				 </div>
				 <div id="div_row3_p1_s2" class="div_row3_p1-right" style="text-align: center;">
                     子div二(内文置中[text-align: center])
				 </div>
				 <div id="div_row3_p1_s3" class="div_row3_p1-right" style="text-align: right;">
                     子div三(内文置右[text-align: right])
				 </div>
			 </div>
        </div>

    </body>

</html>

